import React from 'react';
import { BottomNavigation, BottomNavigationAction, Badge, Paper } from '@mui/material';
import { Home, Search, Notifications, Person, ShoppingCart } from '@mui/icons-material';
import { useNavigate, useLocation } from 'react-router-dom';
import { useNotification } from '@/context/NotificationContext';

export default function BottomNavBar() {
  const navigate = useNavigate();
  const location = useLocation();
  const { unreadCount, showNotificationCount } = useNotification();

  const handleChange = (event, newValue) => {
    navigate(newValue);
  };

  return (
    <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
      <BottomNavigation
        showLabels
        value={location.pathname}
        onChange={handleChange}
      >
        <BottomNavigationAction label="首页" icon={<Home />} value="/home" />
        <BottomNavigationAction label="搜索" icon={<Search />} value="/search" />
        <BottomNavigationAction label="购物车" icon={<ShoppingCart />} value="/cart" />
        <BottomNavigationAction 
          label="通知" 
          icon={
            showNotificationCount && unreadCount > 0 ? (
              <Badge badgeContent={unreadCount} color="error">
                <Notifications />
              </Badge>
            ) : (
              <Notifications />
            )
          } 
          value="/notification" 
        />
        <BottomNavigationAction label="我的" icon={<Person />} value="/profile" />
      </BottomNavigation>
    </Paper>
  );
}